<template>
	<div id="information">
		<table style="width: 100%;">
			<tr class="firstone">
				<td>期号</td>
				<td>开奖日期</td>
				<td>中奖号码</td>
			</tr>
			<template v-if="ssqData.data.length">
				<tr v-for="(item,key) in ssqData.data" :key="key" @click="showDetail(item,key,$event)">
					<td>{{item.period}}</td>
					<td>2</td>
					<td>
						<span v-for="(num,index) in item.winnerNumber" :key="index"
							:class="{winNum:true,redball:index<=5,blueball:index==6}"
							>
							{{num}}
						</span>
					</td>
				</tr>
			</template>
			<tr ref="insertCell" v-show="show">
				<td colspan="3">
					<ul class="cellHeader">
						<li>
							<span>号码</span>
							<span v-for="(item,key) in 49" :key="key">
								{{item<=33?item:item-33}}
							</span>
						</li>
						<template v-if="missNumber.general.length">
							<li>
								<span>遗失次数</span>
                                     <span v-for="(item,key) in missNumber.general" :key="key">
                                        {{item}}
                                    </span>
							</li>
						</template>
						<template v-else>
                                <li>数据为空</li>
                            </template>
					</ul>
				</td>
			</tr>
		</table>
		<el-pagination
            background
            layout="prev, pager, next"
            :total=total
            @current-change="loadMore"
            style="text-align:center;margin-top:20px"
            >
        </el-pagination>
	</div>
</template>

<script>
	export default{
		data(){
			return {
				ssqData:{data:[]},
				total:1,
				show:false,
				currentPage:1,
				preSelect:100,
				missNumber:{general:[]}
			}
		},
		methods:{
			loadMore(num){
				this.show=false;
				this.loadData(10,num)
			},
			loadData(pageSize,pageNum){
				this.$http.get(this.$api.findByGameName,{gameName:"ssq",pageSize:pageSize,pageNo:pageNum})
				.then((resp)=>{
					this.ssqData=resp.data;
					this.total=resp.data.total;
				})
			},
			showDetail(item,index,event){
                if(index==this.preSelect && this.show){
                    this.show = false;
                    return;
                }
                this.missNumber = item.missNumber;
                console.log(item);
                this.show = true;
                this.preSelect = index;
                this.inertAfter(event.target.parentElement,this.$refs.insertCell);
            },
            inertAfter(target,newElement){
                //如果它的下一个元素存在,则在下一元素之前插入内容
                if(target.nextElementSibling){
                    var rs = target.parentElement.insertBefore(newElement,target.nextElementSibling) 
                }else{
                    target.parentElement.appendChild(newElement)
                }
            }
		},
		mounted(){
			this.loadData(10,0);
		}
	}
</script>

<style lang="scss" scoped>
	#information{
		width: 100%;
		height: 100%;
		background: white;
		
		.firstone{
			width: 100%;
			height: 40px;
			
			td:first-child{
				width: 20%;
				height: 40px;
				border: 1px solid #B3C0D1;
				line-height: 40px;
			}
			td:nth-of-type(2){
				width: 20%;
				height: 40px;
				border: 1px solid #B3C0D1;
				line-height: 40px;
			}
			td:last-child{
				width: 60%;
				height: 40px;
				border: 1px solid #B3C0D1;
				line-height: 40px;
			}
		}
	}
	.winNum{
        width: 22px;
        height: 22px;
        display: inline-block;
        margin-left: 10px;
        border-radius: 50%;
        color: white;
        font-size: 12px;
        text-align: center;
        line-height: 22px;
    }
    .redball{
        background: #d70a0a;
    }
    .blueball{
        background: #0099ca
    }
    
    .cellHeader {
        display: flex;
        flex-direction: column;
        li {
            display: flex;
            flex-direction: row;
            span:nth-child(1) {
                flex:3
            }
            span {
                flex: 1;
            }
        }
    }
</style>